<!--
 * @Author: June
 * @Date: 2022-11-17 10:21:33
 * @LastEditors: 无处安放的六月 547293866@qq.com
 * @LastEditTime: 2023-11-27 10:32:21
 * @Description:
 *
-->
<template>
  <div>
    <!-- <i class="iconfont" :class="!isFullscreen ? '#icon-quanpingxianshi' : '#icon-tuichuquanping'" @click="click" /> -->
    <svg v-if="layoutSettings" class="icon" aria-hidden="true" @click="click">
      <use :xlink:href="!isFullscreen ? '#icon-quanpingxianshi' : '#icon-tuichuquanping'" />
    </svg>
    <i v-else class="iconfont fullscreen" :class="!isFullscreen ? 'icon-quanpingxianshi' : 'icon-tuichuquanping'" @click="click" />
  </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
  name: 'Screenfull',
  props: {
    layoutSettings: false
  },
  data() {
    return {
      isFullscreen: false
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.destroy()
  },
  methods: {
    click() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    },
    change() {
      this.isFullscreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.enabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off('change', this.change)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.icon {
  width: 26px;
  height: 70px;
}
.fullscreen {
  font-size: 20px;
  font-weight: bold;
}
.normal {
  color: #fff;
}
</style>
